<template>
  <view class="detail-page">
    <!-- 顶部导航 -->
    <view class="header">
      <text class="title">{{ caseInfo.title }}</text>
    </view>
    <!-- 图片轮播 -->
    <swiper class="image-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(image, index) in caseInfo.images" :key="index">
        <image :src="image" class="swiper-image" mode="aspectFill" @tap="openImageGallery(index)"></image>
      </swiper-item>
    </swiper>
    <!-- 全屏图片画廊弹窗 -->
    <view v-if="showGallery" class="gallery-overlay" @tap="closeGallery">
      <view class="gallery-container" @tap.stop.prevent>
        <!-- 全屏图片容器 -->
        <view class="gallery-fullscreen"
              @touchstart="handleTouchStart"
              @touchmove="handleTouchMove"
              @touchend="handleTouchEnd">
          <image
              :src="currentImage"
              class="gallery-image"
              :style="imageStyle"
              mode="aspectFit"
              @tap.stop.prevent="handleImageTap"
          ></image>
        </view>

        <!-- 顶部信息栏 -->
        <view class="gallery-header">
          <text class="gallery-index" v-if="gallerySource === 'case'">{{ currentImageIndex + 1 }}/{{ caseInfo.images.length }}</text>
          <text class="gallery-index" v-else>{{ roomImageIndex + 1 }}/{{ roomList.length }}</text>
          <view class="gallery-actions">
            <text class="gallery-action" @tap="resetTransform">重置</text>
            <text class="gallery-close" @tap="closeGallery">✕</text>
          </view>
        </view>

        <!-- 底部指示器 -->
        <view class="gallery-footer">
          <view class="gallery-dots">
            <view
                v-for="(image, index) in (gallerySource === 'case' ? caseInfo.images : roomList)"
                :key="index"
                class="gallery-dot"
                :class="{ active: (gallerySource === 'case' ? currentImageIndex === index : roomImageIndex === index) }"
                @tap="switchImage(index)"
            ></view>
          </view>
        </view>

        <!-- 左右切换箭头 -->
        <view v-if="(gallerySource === 'case' && caseInfo.images.length > 1) || (gallerySource === 'room' && roomList.length > 1)" class="gallery-arrows">
          <text class="gallery-arrow gallery-arrow-left" @tap="prevImage" :class="{ disabled: (gallerySource === 'case' ? currentImageIndex === 0 : roomImageIndex === 0) }">‹</text>
          <text class="gallery-arrow gallery-arrow-right" @tap="nextImage" :class="{ disabled: (gallerySource === 'case' ? currentImageIndex === caseInfo.images.length - 1 : roomImageIndex === roomList.length - 1) }">›</text>
        </view>
      </view>
    </view>

    <!-- 设计思路 -->
    <!-- 设计思路 -->
    <view class="design-thought">
      <text class="section-title">设计思路</text>
      <view class="content-wrapper">
        <text class="content">{{ caseInfo.thought }}</text>
      </view>
    </view>

    <!-- 房间列表 -->
    <!-- 房间列表 -->
    <view class="room-list">
      <view class="room-item" v-for="(room, index) in roomList" :key="index">
        <text class="room-title">{{ room.title }}</text>
        <image :src="room.image" class="room-image" mode="aspectFill" @tap="openRoomImageGallery(index)"></image>
      </view>
    </view>
    <view class="room-list" style="height:200rpx">
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-group">
        <view class="action-group">
          <view class="action-item">
            <text class="icon">⭐</text>
            <text class="count">{{ caseInfo.favorites }}</text>
          </view>
        </view>
      </view>
      <view class="button-group">
        <button class="contact-btn" @tap="showRegistrationForm">
          <text class="btn-text">报名</text>
        </button>
      </view>
    </view>

    <!-- 报名表单弹窗 -->
    <view v-if="showRegistrationFormModal" class="modal-overlay" @tap="closeRegistrationForm">
      <view class="modal-container" @tap.stop.prevent>
        <view class="modal-header">
          <text class="modal-title">报名信息</text>
          <text class="modal-close" @tap="closeRegistrationForm">×</text>
        </view>

        <view class="form-container">
          <view class="form-item">
            <text class="label">姓名：</text>
            <input v-model="formData.name" class="input-field" placeholder="请输入您的姓名" />
          </view>

          <view class="form-item">
            <text class="label">手机：</text>
            <input v-model="formData.phone" class="input-field" placeholder="请输入您的手机号码" type="number" />
          </view>

          <view class="form-item">
            <text class="label">小区：</text>
            <input v-model="formData.community" class="input-field" placeholder="请输入您所在的小区" />
          </view>
        </view>

        <view class="modal-footer">
          <button class="submit-btn" @tap="submitRegistration">
            <text class="btn-text">提交报名</text>
          </button>
        </view>
      </view>
    </view>

  </view>
</template>

<style lang="scss">
.detail-page {
  background-color: #f8f9fa;
  min-height: 60vh;
}

.header {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  .title {
    font-size: 30rpx;
    color: #383838;
    font-weight: bold;
  }
}

.image-swiper {
  height: 400rpx;
  .swiper-image {
    width: 100%;
    height: 100%;
  }
}

.info-section {
  background-color: #fff;
  padding: 30rpx;
  margin-top: 20rpx;

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    margin-bottom: 20rpx;
    .tag {
      font-size: 24rpx;
      color: #666;
      background-color: #f5f5f5;
      padding: 4rpx 12rpx;
      border-radius: 8rpx;
    }
  }


  .designer-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }

    .designer-details {
      .designer-name {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }

      .designer-title {
        font-size: 24rpx;
        color: #999;
        margin: 4rpx 0;
      }

      .designer-desc {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
    margin-top: 20rpx;
    .detail-item {
      display: flex;
      .label {
        font-size: 24rpx;
        color: #999;
        width: 80rpx;
      }
      .value {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}

.design-thought {
  background-color: #fff;
  padding: 30rpx;
  margin-top: 20rpx;
  .section-title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
  }
  .content-wrapper {
    display: flex;
    flex-wrap: wrap;
    .content {
      margin-top: 40rpx;
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      width: 100%;
    }
  }
}

.room-list {
  margin-top: 20rpx;
  .room-item {
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    .room-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
    }
    .room-image {
      width: 100%;
      height: 300rpx;
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .action-group {
    display: flex;
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20rpx;
      .icon {
        font-size: 32rpx;
        margin-bottom: 4rpx;
      }
      .count {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .button-group {
    display: flex;
    gap: 16rpx;

    .contact-btn {
      flex: 1;
      background-color: #e93b3d;
      color: #fff;
      border-radius: 8rpx;
      padding: 12rpx 20rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .btn-icon {
        margin-right: 8rpx;
      }
    }

    .scheme-btn {
      flex: 1;
      background-color: #ff7a00;
      color: #fff;
      border-radius: 8rpx;
      padding: 12rpx 20rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .btn-icon {
        margin-right: 8rpx;
      }
    }
  }
}

/* 图片画廊样式 */
.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.gallery-fullscreen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.gallery-image {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.1s ease-out;
  will-change: transform;
  position: absolute;
}

.gallery-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 40rpx 30rpx 20rpx;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.gallery-index {
  font-size: 32rpx;
  font-weight: 500;
}

.gallery-actions {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.gallery-action {
  font-size: 28rpx;
  color: white;
  padding: 12rpx 20rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 20rpx;
}

.gallery-close {
  font-size: 44rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.gallery-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx 40rpx;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 16rpx;
}

.gallery-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.3s ease;

  &.active {
    background: #fff;
    transform: scale(1.2);
  }
}

.gallery-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 2;
}

.gallery-arrow {
  font-size: 60rpx;
  color: white;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: all 0.3s ease;

  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  &:active {
    background: rgba(255,255,255,0.4);
  }
}


.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.1);
}

.modal-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
}

.modal-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
}

.input-field {
  width: 100%;
  padding: 16rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.modal-footer {
  padding: 30rpx;
  text-align: center;
}

.submit-btn {
  width: 100%;
  background-color: #e93b3d;
  color: #fff;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>

<script>
export default {
  data() {
    return {
      // 表单数据
      formData: {
        name: '',
        phone: '',
        community: ''
      },
      showRegistrationFormModal: false, // 控制弹窗显示状态
      caseInfo: {
        title: '150平实景现代原木风，滤镜无法复制的温柔韵味',
        images: [
          '/static/banner/banner1.jpeg',
          '/static/banner/banner2.jpeg',
          '/static/banner/banner3.jpeg',
        ],
        area: '质朴',
        type: '三室',
        style: '现代简约',
        location: '仁恒滨江园',
        designer: {
          avatar: '/static/images/avatar.png',
          name: '王杰',
          title: '首席设计师',
          desc: '从业10年'
        },
        houseType: '三居',
        areaSize: '180',
        budget: '50万',
        region: '上海市上海市',
        thought: '在150平的空间里，我们尝试将现代原木风的设计理念融入其中。这里没有华丽的装饰，只有简洁的线条和自然的材质，营造出温馨舒适的居住氛围。',
        likes: 146,
        favorites: 120
      },
      roomList: [
        {
          title: '玄关实景',
          image: '/static/banner/banner1.jpeg'
        },
        {
          title: '客厅',
          image: '/static/banner/banner2.jpeg'
        }
      ],
      showGallery: false,
      currentImageIndex: 0,

      // 手势相关数据
      scale: 1,
      lastScale: 1,
      translateX: 0,
      translateY: 0,
      lastTranslateX: 0,
      lastTranslateY: 0,
      startX: 0,
      startY: 0,
      isDragging: false,
      isScaling: false,
      initialDistance: 0,
      lastTouchTime: 0,
      gallerySource: 'case', // 'case' 或 'room'
      roomImageIndex: 0
    };
  },
  computed: {
    currentImage() {
      if (this.gallerySource === 'room') {
        return this.roomList[this.roomImageIndex].image;
      }
      return this.caseInfo.images[this.currentImageIndex];
    },
    imageStyle() {
      return {
        transform: `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`,
        transition: this.isDragging || this.isScaling ? 'none' : 'transform 0.2s ease'
      };
    }
  },
  methods: {
    // 显示报名表单弹窗
    showRegistrationForm() {
      this.showRegistrationFormModal = true;
    },

    // 关闭报名表单弹窗
    closeRegistrationForm() {
      this.showRegistrationFormModal = false;
    },

    // 提交报名信息
    submitRegistration() {
      // 验证表单数据
      if (!this.formData.name || !this.formData.phone || !this.formData.community) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }

      // 模拟提交数据（实际项目中替换为API调用）
      console.log('提交报名信息:', this.formData);

      // 显示成功提示
      uni.showToast({
        title: '报名成功！',
        icon: 'success'
      });

      // 关闭弹窗
      this.closeRegistrationForm();

      // 清空表单
      this.formData = {
        name: '',
        phone: '',
        community: ''
      };
    },
    openImageGallery(index) {
      this.gallerySource = 'case';
      this.currentImageIndex = index;
      this.showGallery = true;
      this.resetTransform();
    },

    openRoomImageGallery(index) {
      this.gallerySource = 'room';
      this.roomImageIndex = index;
      this.showGallery = true;
      this.resetTransform();
    },

    closeGallery() {
      this.showGallery = false;
      this.resetTransform();
    },

    // 添加 room 图片切换方法
    prevRoomImage() {
      if (this.roomImageIndex > 0) {
        this.roomImageIndex--;
        this.resetTransform();
      }
    },

    nextRoomImage() {
      if (this.roomImageIndex < this.roomList.length - 1) {
        this.roomImageIndex++;
        this.resetTransform();
      }
    },

    // 修改现有的切换方法以支持不同来源
    prevImage() {
      if (this.gallerySource === 'room') {
        this.prevRoomImage();
      } else {
        if (this.currentImageIndex > 0) {
          this.currentImageIndex--;
          this.resetTransform();
        }
      }
    },

    nextImage() {
      if (this.gallerySource === 'room') {
        this.nextRoomImage();
      } else {
        if (this.currentImageIndex < this.caseInfo.images.length - 1) {
          this.currentImageIndex++;
          this.resetTransform();
        }
      }
    },

    // 修改 switchImage 方法
    switchImage(index) {
      if (this.gallerySource === 'room') {
        this.roomImageIndex = index;
      } else {
        this.currentImageIndex = index;
      }
      this.resetTransform();
    },

    resetTransform() {
      this.scale = 1;
      this.lastScale = 1;
      this.translateX = 0;
      this.translateY = 0;
      this.lastTranslateX = 0;
      this.lastTranslateY = 0;
      this.isDragging = false;
      this.isScaling = false;
    },

    handleImageTap(e) {
      const currentTime = new Date().getTime();
      const timeDiff = currentTime - this.lastTouchTime;

      // 双击检测 (300ms内连续点击)
      if (timeDiff < 300) {
        if (this.scale === 1) {
          // 双击放大到2倍
          this.scale = 2;
          this.lastScale = 2;
        } else {
          // 双击恢复原始大小
          this.resetTransform();
        }
      }

      this.lastTouchTime = currentTime;
    },

    handleTouchStart(e) {
      if (e.touches.length === 1) {
        // 单指触摸 - 拖拽
        this.startX = e.touches[0].clientX;
        this.startY = e.touches[0].clientY;
        this.isDragging = true;

        // 记录开始拖拽时的位置
        this.lastTranslateX = this.translateX;
        this.lastTranslateY = this.translateY;

      } else if (e.touches.length === 2) {
        // 双指触摸 - 缩放
        this.isScaling = true;
        this.handlePinchStart(e);
      }
    },

    handleTouchMove(e) {
      if (e.touches.length === 1 && this.isDragging) {
        // 单指移动 - 拖拽
        const currentX = e.touches[0].clientX;
        const currentY = e.touches[0].clientY;
        const deltaX = currentX - this.startX;
        const deltaY = currentY - this.startY;

        // 只有在缩放状态下才允许拖拽
        if (this.scale > 1) {
          this.translateX = this.lastTranslateX + deltaX;
          this.translateY = this.lastTranslateY + deltaY;

          // 限制拖拽范围，防止图片被拖出可视区域
          this.limitTranslation();
        }
        // 注意：这里不再设置 isDragging = false，保持拖拽状态

      } else if (e.touches.length === 2 && this.isScaling) {
        // 双指移动 - 缩放
        this.handlePinchMove(e);
      }
    },

    handleTouchEnd(e) {
      if (e.changedTouches.length === 1 && this.isDragging) {
        const endX = e.changedTouches[0].clientX;
        const endY = e.changedTouches[0].clientY;
        const deltaX = endX - this.startX;
        const deltaY = endY - this.startY;

        // 如果是在未缩放状态下水平滑动超过50px，切换图片
        if (this.scale === 1 && Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
          if (deltaX > 0) {
            this.prevImage(); // 向右滑动，显示上一张
          } else {
            this.nextImage(); // 向左滑动，显示下一张
          }
        }

        this.isDragging = false;
      } else if (e.changedTouches.length === 2) {
        this.isScaling = false;
      }
    },

    handlePinchStart(e) {
      // 记录初始距离
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      this.initialDistance = Math.sqrt(
          Math.pow(touch1.clientX - touch2.clientX, 2) +
          Math.pow(touch1.clientY - touch2.clientY, 2)
      );
      this.lastScale = this.scale;

      // 记录缩放中心点，用于调整平移
      this.scaleCenterX = (touch1.clientX + touch2.clientX) / 2;
      this.scaleCenterY = (touch1.clientY + touch2.clientY) / 2;
      this.lastTranslateX = this.translateX;
      this.lastTranslateY = this.translateY;
    },

    handlePinchMove(e) {
      // 计算当前距离
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      const currentDistance = Math.sqrt(
          Math.pow(touch1.clientX - touch2.clientX, 2) +
          Math.pow(touch1.clientY - touch2.clientY, 2)
      );

      // 计算缩放比例
      const scaleRatio = currentDistance / this.initialDistance;
      const newScale = this.lastScale * scaleRatio;

      // 限制缩放范围
      this.scale = Math.max(0.5, Math.min(5, newScale));

      // 计算缩放中心点
      const currentCenterX = (touch1.clientX + touch2.clientX) / 2;
      const currentCenterY = (touch1.clientY + touch2.clientY) / 2;

      // 调整平移，使缩放中心保持稳定
      const scaleChange = this.scale - this.lastScale;
      this.translateX = this.lastTranslateX + (currentCenterX - this.scaleCenterX) * scaleChange * 0.5;
      this.translateY = this.lastTranslateY + (currentCenterY - this.scaleCenterY) * scaleChange * 0.5;

      // 限制拖拽范围
      this.limitTranslation();
    },

    limitTranslation() {
      // 根据缩放比例计算最大平移范围
      // 缩放越大，允许的平移范围也越大
      const maxTranslate = (this.scale - 1) * 100;

      this.translateX = Math.max(-maxTranslate, Math.min(maxTranslate, this.translateX));
      this.translateY = Math.max(-maxTranslate, Math.min(maxTranslate, this.translateY));
    },

    contactDesigner() {
      uni.showToast({
        title: '正在联系设计师...',
        icon: 'loading'
      });
    },

    getScheme() {
      uni.showToast({
        title: '方案已发送至您的邮箱',
        icon: 'success'
      });
    }
  }
};
</script>